<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
<!--    引入vue-->
    <script type="text/javascript" src="../../../javascript/vue.js"></script>
</head>
<body>
<!--普通方式使用组件-->
<!--<div id="root">-->
<!--    <school></school>-->
<!--</div>-->
<!--使用app管理方式使用组件-->
<div id="root">

</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //创建student组件
    const student =Vue.extend({
        name:"student",
        template:`
        <div class="demo">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生班级：{{classname}}</h2>
        <h2>学生年级：{{classyear}}</h2>
        <h2>学生学号：{{number}}</h2>
        </div>

        `,
        data(){
            return{
                name:"张三",
                classname:"一班",
                classyear:"九年级",
                number:"145236871",
            }
        }
    })
    //    创建一个school组件
    const school = Vue.extend({
        name:"school",
        template:`
        <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
<!--        将student组件嵌套进school中-->
        <student></student>
        </div>
       `,
        data(){
            return{
                name:"xxxx高中",
                address:"陕西省xx市xx区xx路xx号",
            }
        },
        //在school中注册student组件（局部）
        components:{
            student:student,
        }
    })
//创建一个hello组件
    const  hello = Vue.extend({
        name:'hello',
        template:`
        <div class="demo">
        <h1>欢迎来到：{{schoolname}}学习</h1>
        <button @click="showname">点击我</button>
        </div>
        `,
        data(){
            return{
                schoolname:"xxx学校",

            }
        },
        methods:{
            showname(){
                alert(this.schoolname)
            }
        }
    })

    //创建app组件
    const app = Vue.extend({
        name:"app",
        template:`
        <div class="demo">
        <hello></hello>
          <school></school>
        </div>
        `,
        components:{
            hello:hello,
            school:school,
        }
    })
    /*//创建vm
    new Vue({
        el:'#root',
        components:{
            school:school,
        },

    })*/
    //创建vm，并注册app组件
    new Vue({
        template:'<app></app>',
        el:'#root',
        components:{
            app:app,
        }
    })
</script>
</html>